<template>
  <div class="the-list">  
  <div class="panel-search">
    <el-form inline :model="table.query" class="demo-form-inline">
      <el-form-item label="关键词搜索">
        <el-input v-model="table.query.keyword" placeholder="支持标题、正文、标签" clearable/>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="tableFn.onSubmit">搜索</el-button>
      </el-form-item>
    </el-form>
  </div>
    <div class="panel-table">

      <div class="table-head">
        <span>推荐列表</span>
        <div>
          <el-button type="primary" @click="configFn.openPanel">推荐设置</el-button>
        </div>
      </div>

      <el-table :data="table.list" stripe :header-cell-style="{backgroundColor:'#ededed',padding:'12px 0'}" style="width: 100%;" border>
        <el-table-column prop="nickname" label="用户昵称">
          <template #default="{row}">
            <span>{{row.nickname}}</span>
          </template>
        </el-table-column> -->
        <el-table-column prop="phone" label="注册手机号" />
        <el-table-column prop="recommendUserNum" label="推荐用户数量" />
        <el-table-column prop="recommendSuccessUserNum" label="推荐成功用户数量" />
        <el-table-column prop="accumulatedCookies" label="累计奖励小饼干数量" />
        <el-table-column prop="lastMonthCookies" label="上月累计获得小饼干数量" />
        <el-table-column prop="nowMonthCookies" label="本月累计获得小饼干数量" />
       
        <el-table-column fixed="right" label="操作" width="120px" align="center">
          <template #default="{row}">
            <el-button size="small" type="primary" plain @click="tableFn.gotoDetail(row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table-pagination">
        <pagination :total="table.total" v-model:page="table.query.page" v-model:limit="table.query.pageSize" @pagination="tableFn.getTableList" />
      </div>
    </div>


    <configPopup v-model="config.showBox"></configPopup>
  </div>
</template>


<script setup>
import { reactive, watch } from "vue";
import { getAllCustomersInviteList } from "@/api/invite";
import { ElMessage, ElMessageBox } from "element-plus";
import Pagination from "@/components/Pagination";
import { useRouter} from "vue-router";
import { activityList,getItemFromArray,isLongTime } from "@/utils/tool";
import imageViewer from "@/components/imageViewer/index2";

import configPopup from "./invite/configPopup";
const router = useRouter();

watch(()=> router.currentRoute.value,(nv,ov)=>{
  if( ov.name === "redPacketCreate" || ov.name === "redPacketEdit"){
    table.query.page = 1;
    tableFn.getTableList();
  }
})

const { $data: table, $fn: tableFn } = (() => {
  const $data = reactive({
    query: {
      pageSize: 10,
      page: 1,
      keyword: "",
    },
    total: 0,
    list: [],
  });
  const $fn = {
    getTableList() {
      getAllCustomersInviteList($data.query).then((res) => {
        if (res.code === 0) {
          $data.list = res.data.items || [];
          $data.total = res.data.pagination.total_record;
        }
      });
    },
    onSubmit() {
      $data.query.page = 1;
      $fn.getTableList();
    },
    gotoDetail(row) {
      router.push('/activity/invite/detail/' + row.customerId+"?view=detail");
    },
  };

  $fn.getTableList();
  return {
    $data,
    $fn,
  };
})();

const { $data: config,$fn:configFn } = (() => {
  const $data=reactive({
    showBox: false,
  })
  const $fn = {
    openPanel(){
      $data.showBox = true;
    },
  }
  return {
    $data,
    $fn,
  }
})();


</script>
<script>
export default {
  name: "invite",
};
</script>
<style scoped lang="scss">
@import "@/styles/tablePage.scss";
// .the-list {
//   height: 100%;
// }
.el-form-item {
  margin-bottom: 8px;
}
</style>